<template>
	<view class="page-root">
		<nav-bar>历史消息</nav-bar>
		
		<view class="page-head">
			历史消息1280条
		</view>
		
		<view>
			<view class="notice-base" hover-class="uni-list-cell-hover" v-for="(item,index) in curseList" 
			:key="index" @tap="onInfoClick(item)">

				<view v-if="curTab == 'warning'" class="notice-item">
					<view class="item-one">
						<view class="item-one-icon"></view>
						<view class="item-one-left">{{item.title}}</view>
						<view class="item-one-right">{{item.title}} - 2</view>
					</view>
					<view class="item-two">
						<view class="item-two-left">{{item.title}}</view>
						<view class="item-dot"></view>
					</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	// import {
	// 	getMyTeach,
	// 	getMyStudy
	// } from "@/services/home.js";
	import test_msglist from "@/common/test_jsons/test_msglist.js"

	export default {
		name: 'CourseList',
		computed: {},
		data() {
			return {
				havedata: true,
				emptyImg: '/static/' + 'noAddCourse.svg',
				rightUrl: '/static/' + 'right-arrow-gray.png',
				curTab: 'warning',
				curseList: []
			};
		},
		created() {
			this.getCourseList();
		},
		onShow() {
			this.getCourseList();
		},
		mounted() {

		},
		methods: {
			changeTab(curTab) {
				this.curTab = curTab;
				this.getCourseList();
			},
			courseItemClick(item) {

			},

			onInfoClick(itemData) {
				console.log(itemData)
				uni.navigateTo({
					url:'/pages/webPage/webPage?url=http://www.baidu.com&title=' + itemData.title
				})
			},

			getCourseList() {
				this.curseList = test_msglist.data;
			}
		},
	};
</script>

<style lang='scss'>
	.page-root {
		height: 100vh;
		background: #F8F8F8;
	}
	
	.page-head { 
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.45);
		line-height: 18px;
		padding: 10upx;
		background-color: #FFFFFF;

	}

	.top-tab {
		/* position: fixed; */
		width: 100%;
		height: 70upx;
		background: #fff;
		padding-top: 20upx;

		box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);

	}

	.navtab {
		float: left;
		margin-top: 0upx;
		margin-left: 100upx;
		width: 30%;
		height: 68upx;
		text-align: center;
		color: rgba(0, 0, 0, 0.45);
	}


	.navtabActive {
		border-bottom: 4upx solid #327FFC;
		color: #327FFC;
	}

	.notice-base {
		flex-direction: row;
	}

	.notice-item {
		position: relative;
		display: flex;
		flex-direction: column;

		margin: 20upx 20upx 0upx 20upx;
		padding: 18upx 22upx 18upx 22upx;

		background: #FFFFFF;
		box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.05);
		border-radius: 4px;


	}

	.item-one {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.item-one-icon {
		width: 3px;
		height: 16px;
		background-color: #007AFF;
		margin-right: 10px;
	}

	.item-one-left {
		width: 60vw;
		font-size: 16px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}

	.item-one-right {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.25);
	}

	.item-dot {
		width: 10px;
		height: 10px;
		background-color: #FF0000;
		margin-right: 10px;
		border-radius: 50%;
	}

	.item-two {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 24upx;
		justify-content: space-between;
	}

	.item-two-left {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.45);
		line-height: 16px;
	}

	.notice-b-base {
		position: relative;
		display: flex;
		flex-direction: row;
		margin: 20upx 20upx 0upx 20upx;
		padding: 18upx 22upx 18upx 22upx;
		background: #FFFFFF;
		box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
		
		align-items: center;
	}

	.arrow-right {
		width: 32upx;
		height: 32upx;
		right: 4upx;
		position: absolute;
	}
</style>
